<template>
  <view class="notice-container" :style="{ width: screenWidth ? (screenWidth + 'px') : 'calc(750rpx - 60rpx)' }">
    <!-- 垂直轮播模式 -->
    <view v-if="direction === 'vertical'" class="vertical-wrapper" :style="{ height: height + 'rpx' }">
      <view class="scroll-content" :style="{
        transform: `translateY(${translateY}px)`,
        transition: `transform ${duration}s linear`
      }" @transitionend="handleTransitionEnd">
        <view v-for="(item, index) in noticeList" :key="item.id" class="notice-item" @click="handleClick(item)">
          <slot name="content" :item="item">
            <text class="default-text">{{ item.text }}</text>
          </slot>
        </view>
      </view>
    </view>

    <!-- 水平跑马灯模式 -->
    <view v-if="direction === 'horizontal'" class="horizontal-wrapper">
      <view class="shade_model flex-bwt">
        <view class="left_icon ft-num3 ft-40">
          {{ 'New' }}
        </view>
        <view class="rig_icon">

          <image class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png" mode="scaleToFill" />
        </view>
      </view>
      <view class="text_model">
        <view class="marquee-content" :style="{
          transform: `translateX(${translateX}%)`,
          animationDuration: `${duration}s`
        }">
          <text class="marquee-text">{{ displayText }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onReady } from '@dcloudio/uni-app'
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'

const props = defineProps({
  // 通知列表
  notices: {
    type: Array || String,
    default: () => []
  },
  // 滚动方向 vertical/horizontal
  direction: {
    type: String,
    default: 'vertical'
  },
  // 容器高度（垂直模式有效）
  height: {
    type: Number,
    default: 140
  },
  // 动画时长（秒）
  duration: {
    type: Number,
    default: 0.5
  },
  // 停留时间（秒）
  interval: {
    type: Number || String,
    default: 0
  },
  // 是否悬停暂停
  pauseOnHover: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['click'])

// 垂直模式数据
const noticeList = ref([...props.notices])
const translateY = ref(0)
let currentIndex = 0

// 水平模式数据
const translateX = ref(100)
const displayText = computed(() => props.notices[0] || '')
let marqueeTimer = null

// 通用定时器
let timer = null

// 处理垂直滚动
const startVerticalScroll = () => {
  timer = setInterval(() => {
    translateY.value = -props.height
    currentIndex = (currentIndex + 1) % noticeList.value.length
  }, (props.duration + props.interval) * 1000)
}

// 处理水平滚动
const startMarquee = () => {
  if (props.notices.length === 0) return

  const resetMarquee = () => {
    translateX.value = 100
    setTimeout(() => {
      translateX.value = -100
    }, 50)
  }

  marqueeTimer = setInterval(() => {
    resetMarquee()
  }, (props.duration * 2 + props.interval) * 1000)

  // 首次启动
  setTimeout(() => {
    translateX.value = -100
  }, 50)
}

// 动画结束处理（垂直模式）
const handleTransitionEnd = () => {
  // 移动第一个元素到末尾
  noticeList.value = [...noticeList.value.slice(1), noticeList.value]
  translateY.value = 0
}

// 点击事件
const handleClick = (item) => {
  emit('click', item)
}

// 鼠标事件处理
const handleMouseEnter = () => {
  if (props.pauseOnHover) {
    clearInterval(timer)
    clearInterval(marqueeTimer)
  }
}

const handleMouseLeave = () => {
  if (props.pauseOnHover) {
    props.direction === 'vertical' ? startVerticalScroll() : startMarquee()
  }
}

// 生命周期
onMounted(() => {
  if (props.direction === 'vertical') {
    // 垂直模式克隆首条数据实现无缝滚动
    if (props.notices.length > 0) {
      noticeList.value = [...props.notices, { ...props.notices }]
    }
    startVerticalScroll()
  } else {
    startMarquee()
  }
  // uni.showModal({
  //   title: ``,
  //   content: `duration=${props.duration},interval${props.interval},notices${props.notices}`,
  //   showCancel: true,
  //   success: ({ confirm, cancel }) => { }
  // })
})
const screenWidth = ref(0)
onReady(() => {
  const systemInfo = uni.getSystemInfoSync()
  let statusBarHeight = systemInfo.statusBarHeight
  screenWidth.value = systemInfo.screenWidth - 30
})
onBeforeUnmount(() => {
  clearInterval(timer)
  clearInterval(marqueeTimer)
})
</script>

<style lang="scss" scoped>
.notice-container {
  // width: 100vm;
  background-color: #fff;
  overflow: hidden;
  box-sizing: border-box;
  width: 600rpx;
  margin: 0 auto;
  border: 2rpx solid #f1f1f1;
  border-radius: 20rpx;
  // background-color: red;
}

/* 垂直模式样式 */
.vertical-wrapper {
  position: relative;
  overflow: hidden;
}

.scroll-content {
  position: absolute;
  width: 100%;
}

.notice-item {
  padding: 8rpx 20rpx;
  height: v-bind('props.height + "px"');
  display: flex;
  align-items: center;
}

.default-text {
  font-size: 26rpx;
  color: #666;
}

/* 水平模式样式 */
.horizontal-wrapper {
  // height: 60rpx;
  height: 70rpx;
  width: 100%;
  // padding: 10rpx 20rpx;
  overflow: hidden;
  position: relative;
  // background-color: red;
  box-sizing: border-box;
  // background: linear-gradient(to top, #ffffff, #F8F8F8);
  background-color: #fff;

}

.text_model {
  height: 100%;
  width: calc(100% - 38px - 28px);
  position: absolute;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0 auto;
  left: 0;


}

.shade_model {
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  z-index: 10;


  .left_icon,
  .rig_icon {
    background: linear-gradient(to top, #ffffff, #F8F8F8);

    height: 100%;
    // width: 70rpx;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

  }

  .left_icon {
    padding: 0 10rpx 0 20rpx;
  }

  .rig_icon {
    padding: 0 20rpx 0 10rpx;
  }

  .icon {
    width: 24rpx;
    height: 24rpx;
  }

}

.marquee-content {
  white-space: nowrap;
  position: absolute;
  height: 100%;
  will-change: transform;
  transform: translateZ(0);
  animation: marquee linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

.marquee-text {
  width: 100%;
  font-size: 26rpx;
  color: #666;
  padding-right: 40rpx;
  white-space: nowrap;
  line-height: 70rpx;

}
</style>